﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style>/*<![CDATA[*/

table{border: 1px solid gray;}
td{border: 1px dotted gray;}
p{margin: 3px 0 3px 0; padding: 0;}
#ID_Footer{font-size: small; font-style: italic; text-align: right; margin-top: 4em; padding-top: 4px; border-top: 2px solid gray;}

/*]]>*/</style><title>HTML &amp; CSS 设计与构建网站</title></head><body>
<div style="text-align: center"><span style="font-family: 宋体; font-size: 28pt; font-weight: bold; line-height: 280%">《</span><span style="font-family: Calibri; font-size: 28pt; font-weight: bold; line-height: 280%">HTML &amp; CSS </span><span style="font-family: 宋体; font-size: 28pt; font-weight: bold; line-height: 280%">设计与构建网站》</span><span style="font-family: Times New Roman; font-size: 28pt; font-weight: bold; line-height: 280%">-</span><span style="font-family: 宋体; font-size: 28pt; font-weight: bold; line-height: 280%">笔记</span></div>
<div style="text-align: right"><span style="font-family: Times New Roman; font-size: 11pt; font-style: italic">[HTML &amp; CSS </span><span style="font-family: 宋体; font-size: 11pt; font-style: italic">设计与构建网站，</span><span style="font-family: Times New Roman; font-size: 11pt; font-style: italic"> Jon Duckett, </span><span style="font-family: 宋体; font-size: 11pt; font-style: italic">清华大学出版社，</span><span style="font-family: Times New Roman; font-size: 11pt; font-style: italic">2013]</span></div>
<div style="text-align: right"><span style="font-family: Times New Roman; font-size: 14pt">Leo</span><span style="font-family: 宋体; font-size: 14pt">，</span><span style="font-family: Times New Roman; font-size: 14pt">2016-5-11</span></div>
<blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第1章 &nbsp; &nbsp; &nbsp; &nbsp;结构</p></span></div></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第2章 &nbsp; &nbsp; &nbsp; &nbsp;文本</p></span></div></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第3章 &nbsp; &nbsp; &nbsp; &nbsp;列表</p></span></div></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第4章 &nbsp; &nbsp; &nbsp; &nbsp;链接</p></span></div></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第5章 &nbsp; &nbsp; &nbsp; &nbsp;图像</p></span></div></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第6章 &nbsp; &nbsp; &nbsp; &nbsp;表格</p></span></div></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第7章 &nbsp; &nbsp; &nbsp; &nbsp;表单</p></span></div></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第8章 &nbsp; &nbsp; &nbsp; &nbsp;其他标记</p></span></div></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第9章 &nbsp; &nbsp; &nbsp; &nbsp;Flash、视频和音频</p></span></div></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第10章 &nbsp; &nbsp; &nbsp; &nbsp;css简介</p></span></div></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第11章 &nbsp; &nbsp; &nbsp; &nbsp;颜色</p></span></div></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第12章 &nbsp; &nbsp; &nbsp; &nbsp;文本</p></span></div></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第13章 &nbsp; &nbsp; &nbsp; &nbsp;盒子</p></span></div></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第14章 &nbsp; &nbsp; &nbsp; &nbsp;列表、表格和表单</p></span></div></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第15章 &nbsp; &nbsp; &nbsp; &nbsp;布局</p></span></div></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第16章 &nbsp; &nbsp; &nbsp; &nbsp;图像</p></span></div></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第17章 &nbsp; &nbsp; &nbsp; &nbsp;HTML5布局 (简化)</p></span></div></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="line-height: 280%; font-weight: bold; font-family: 宋体; "><p>第18章 &nbsp; &nbsp; &nbsp; &nbsp;建站过程和设计方法 (简化)</p></span></div></blockquote></blockquote></blockquote><div><span style="font-family: 宋体; font-size: 26pt; font-weight: bold; line-height: 280%">附</span><span style="font-family: Calibri; font-size: 26pt; font-weight: bold; line-height: 280%">A </span><span style="font-family: 宋体; font-size: 26pt; font-weight: bold; line-height: 280%">笔记中标记说明</span><br></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 160%">&nbsp; &nbsp; 带下划线标记表示不推荐使用，应由</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%">css</span><span style="font-family: 宋体; font-size: 12pt; line-height: 160%">元素来替代。</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%">&nbsp; &nbsp; &nbsp; &nbsp; &lt;</span><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 160%">input</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%"> /&gt; stands for html markup or css property</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; color: #c45911; line-height: 160%">&nbsp; &nbsp; &nbsp; &nbsp; height </span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">denotes element property or feature</span></div><div><br></div><div><br></div><div><div><font class="Apple-style-span" size="5"><b><br></b></font></div><div><font class="Apple-style-span" size="5"><b>重点：</b></font></div><div><font class="Apple-style-span" size="5"><b><br></b></font></div><div>&nbsp; &nbsp; 1. &nbsp; &nbsp; &nbsp; &nbsp;class 特性</div><div><br></div><div>&nbsp; &nbsp; &nbsp; &nbsp; 如果你要指定一个元素属于几个不同的类，则用空格将它们隔开，如:</div><div><br></div><div>&nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="important admmitance"&gt;...&lt;/p&gt;</div><div><br></div><div><br></div><div>&nbsp; &nbsp; 2. &nbsp; 块级元素主要有</div><div>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;, &lt;h1&gt;, &lt;p&gt;, &lt;ul&gt;, &lt;li&gt;</div><div><br></div><div><br></div><div>&nbsp; &nbsp; 3. &nbsp; &nbsp; &nbsp; &nbsp;内联元素主要有</div><div>&nbsp; &nbsp;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;, &lt;img&gt;, &lt;a&gt;, &lt;b&gt;, &lt;em&gt;</div></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><script type="text/javascript" language="javascript" src="jquery.js"></script><script type="text/javascript" language="javascript" src="itemlink.js"></script></body></html>